<template>
	<div class="course">
		<div class="course_video" id="videos">
			<span class="video-text van-ellipsis" v-if="notPlay">{{courseDetail.name}}</span>
		</div>
		<div class="pl16 pr16">
			<course-explain
				:bordershow="true"
				:courseDetail="courseDetail"
			></course-explain>
		</div>
		<div class="reviewer_card">
			<div class="reviewer_peoplesay pr16 pl16">
				<div class="title_text_start">
					<span class="mr9">技术水平:</span>
					<van-rate
						v-model="reviewerparams.skillStar"
						:size="18"
						color="#E8541E"
					/>
				</div>
				<div class="title_text_start">
					<span class="mr9">教学水平:</span>
					<van-rate
						v-model="reviewerparams.teacherStar"
						:size="18"
						color="#E8541E"
					/>
				</div>
				<textarea
					class="reviewer_textarea"
					placeholder="请输入对专家的评价内容"
					v-model="reviewerparams.commtent"
				></textarea>
			</div>
		</div>
		<div class="video_ecaluate_tool flexcc">
			<div class="ecaluate_tool_btn flexcc" @click="doreviewervideo">发布</div>
		</div>
	</div>
</template>
<script>
import CourseExplain from '../video-course/course-explain'
import Rate from 'vant/lib/rate'
import 'vant/lib/rate/style'
import API from '../../services/index'
import { Dialog } from 'vant'
import Player from 'xgplayer'
export default {
	name: 'video-reviewer',
	components: {
		CourseExplain,
		VanRate: Rate,
		[Dialog.Component.name]: Dialog.Component,
	},
	data() {
		return {
			detailParams: {
				courseId: '',
			},
			value: 5,
			courseDetail: {},
			reviewerparams: {
				commtent: '',
				courseId: 0,
				skillStar: 0,
				teacherStar: 0,
			},
			notPlay: true,
		}
	},
	created() {
		this.detailParams.courseId = this.$route.params.courseId
		this.reviewerparams.courseId = this.$route.params.courseId
		this.getcourseDetail()
	},
	mounted() {

	},
	methods: {
		doreviewervideo() {
			if (!this.reviewerparams.commtent.trim()) {
				Dialog.alert({
					title: '提示',
					message: '请输入对专家的评价内容',
				}).then(() => {
					// on close
				})
			} else if (this.reviewerparams.commtent.length > 100) {
				Dialog.alert({
					title: '提示',
					message: '评价限制输入100字符',
				}).then(() => {
					// on close
				})
			} else {
				this.goreviewervideo(this.reviewerparams)
			}
		},
		async goreviewervideo(params) {
			const res = await API.postEvaluateCourseAjax({
				data: params,
			})
			Dialog.alert({
				title: '提示',
				message: '发布成功',
			}).then(() => {
				this.$router.go(-1)
			})
			console.log(res)
		},
		async getcourseDetail() {
			const res = await API.getcourseDetailAjax({
				params: this.detailParams,
			})
			if (!res.skillStar) {
				res.skillStar = 0
			}
			this.courseDetail = res
			this.initVideo(res)
		},
		initVideo(params) {
			this.$nextTick(() => {
				// eslint-disable-next-line no-unused-vars
				const player = new Player({
					id: 'videos',
					url: params.link,
					autoplay: false,
					width: '375px',
					height: '200px',
					poster: params.imgs,
					videoInit: true,
					hasStart: false,
					'x5-video-player-type': 'h5',
  					playsinline: false,
				})
				player.on('play', () => {
					this.notPlay = false
				})
				player.on('pause', () => {
					this.notPlay = true
				})
			})
		},
	},
}
</script>
<style scoped lang="scss">
.router-container{
  top: 0!important;
  height: 100%!important;
}
.course {
	padding: 0 !important;
	padding-bottom: 80px !important;
}
.course_video {
	width: 100%;
	height: 200px;
	margin: 0 auto;
	margin-bottom: 16px;
	opacity: 0.5;
	position: relative;
	.video-text{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 50%;
		margin-top: 12px;
		z-index: 2000;
		color: #FFFFFF;
		max-width: 60%;
	}
}
.reviewer_card {
	padding-top: 10px;
	background: #f5f5f5;
	.reviewer_peoplesay {
		width: 100%;
		background: #ffffff;
		overflow: hidden;
		box-sizing: border-box;
	}
}
.title_text_start {
	height: 25px;
	margin-top: 16px;
	font-size: 14px;
	color: #333333;
	line-height: 25px;
	display: flex;
	align-items: center;
}
.reviewer_textarea {
	width: 100%;
	height: 81px;
	background: #f9f9f9;
	border-radius: 4px;
	border: 0;
	margin-top: 20px;
	box-sizing: border-box;
	padding: 8px 16px;
}
.video_ecaluate_tool {
	width: 100%;
	height: 71px;
	background: #ffffff;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
	position: fixed;
	bottom: 0;
	left: 0;
	justify-content: center;
}
.ecaluate_tool_btn {
	width: 343px;
	height: 47px;
	background: linear-gradient(315deg, #0a73cf 0%, #108ee9 100%);
	border-radius: 4px;
	justify-content: center;
	font-size: 18px;
	line-height: 25px;
	color: #ffffff;
}
</style>
